@model LoginViewModel
@*<partial name="_ValidationSummary" />*@
<style type="text/css">
    .drag {
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
    }

    .handler {
        width: 40px;
        height: 32px;
        border: 1px solid #ccc;
        cursor: move;
    }

    .handler_bg {
        background: #fff url("") no-repeat center;
    }

    .handler_ok_bg {
        background: #fff url("") no-repeat center;
    }

    .drag_bg {
        background-color: #7ac23c;
        height: 34px;
        width: 0px;
    }

    .drag_text {
        position: absolute;
        top: 0px;
        width: 100%;
        text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
    }
</style>

<div id="login-page">
    <row type="flex" align="middle" justify="center">
        <i-col span="24">
            <div>
                <Card :bordered="false" dis-hover shadow class="sign-main">
                    <div slot="title" class="head">用户登录</div>
                    @if (Model.EnableLocalLogin)
                    {
                        <i-form label-position="top" ref="loginForm" v-bind:model="form" v-bind:rules="rules" v-on:keydown.enter.native="handleSubmit">
                            <form-item prop="Username">
                                <i-input v-model="form.Username" placeholder="请输入用户名" icon="ios-contact" ref="Username" size="large"></i-input>
                            </form-item>
                            <form-item prop="Password">
                                <i-input v-bind:type="passwordType" v-model="form.Password" placeholder="请输入密码" ref="Password" v-on:on-click="showPwd" v-bind:icon="passwordType === 'password' ? 'md-lock' : 'md-unlock'" size="large"></i-input>
                            </form-item>

                        </i-form>
                        <div id="vaptcha_container">
                            <div class="drag" ref="dragDiv">
                                <div class="drag_bg"></div>
                                <div class="drag_text">{{confirmWords}}</div>
                                <div ref="moveDiv" v-on:mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
                            </div>
                        </div>
                        }
                        @if (Model.AllowRememberLogin)
                        {
                            <div>
                                <Checkbox v-model="form.RememberLogin">记住密码</Checkbox>
                            </div>
                        }
                        <div class="dev-sign-main-aside">
                            <i-button v-on:click="handleSubmit('loginForm')" type="success" long size="large">登录</i-button>
                            @if (Model.VisibleExternalProviders.Any())
                            {
                                <div class="dev-sign-main-aside-tip">
                                    @foreach (var provider in Model.VisibleExternalProviders)
                                    {
                                        <a title="@provider.DisplayName" class="ivu-button ivu-btn-primary ivu-btn-circle" asp-controller="External" asp-action="Challenge"
                                           asp-route-scheme="@provider.AuthenticationScheme"
                                           asp-route-returnUrl="@Model.ReturnUrl">
                                            @provider.DisplayName
                                        </a>
                                    }
                                </div>
                            }
                        </div>
                    </Card>
            </div>
        </i-col>
    </row>


    <div class="login-con">
        <Card icon="log-in" title="欢迎登录" v-bind:bordered="false">
            <div class="form-con">
                @if (Model.EnableLocalLogin)
                {
                    <form asp-route="Login" class="ivu-form ivu-form-label-right">
                        <input type="hidden" asp-for="ReturnUrl" />
                        <div class="ivu-form-item ivu-form-item-required">
                            <div class="ivu-form-item-content">
                                <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text ivu-input-group ivu-input-group-default ivu-input-group-with-append ivu-input-hide-icon">
                                    <!---->
                                    <!----> <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                    <input autocomplete="off" spellcheck="false" type="text" placeholder="请输入用户名"
                                           asp-for="Username" autofocus="autofocus" class="ivu-input ivu-input-default">
                                    <div class="ivu-input-group-append" style="">
                                        <span><i class="ivu-icon ivu-icon-ios-person" style="font-size: 16px;"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ivu-form-item ivu-form-item-required">
                            <div class="ivu-form-item-content">
                                <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-password ivu-input-group ivu-input-group-default ivu-input-group-with-append ivu-input-hide-icon">
                                    <!---->
                                    <!----> <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                    <input asp-for="Password" autocomplete="off" spellcheck="false" type="password"
                                           placeholder="请输入密码" class="ivu-input ivu-input-default">
                                    <div class="ivu-input-group-append" style="">
                                        <span>
                                            <i class="ivu-icon ivu-icon-md-lock"
                                               style="font-size: 16px;"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ivu-form-item">
                            <button name="button" value="login" class="ivu-btn ivu-btn-primary ivu-btn-long">登录</button>
                            @*<button class="btn btn-secondary" name="button" value="cancel">Cancel</button>*@
                        </div>
                    </form>}
                <button v-on:click="sumbitLogin()">例如</button>
                @*<p class="login-tip">输入任意用户名和密码即可</p>*@
            </div>
        </Card>
    </div>



    <div style="display:none;">
        @if (Model.AllowRememberLogin)
        {
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" asp-for="RememberLogin">
                    <label class="form-check-label" asp-for="RememberLogin">
                        Remember My Login
                    </label>
                </div>
            </div>}

        @if (Model.VisibleExternalProviders.Any())
        {
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">
                        <h2>External Account</h2>
                    </div>
                    <div class="card-body">
                        <ul class="list-inline">
                            @foreach (var provider in Model.VisibleExternalProviders)
                            {
                                <li class="list-inline-item">
                                    <a class="btn btn-secondary" asp-controller="External" asp-action="Challenge"
                                       asp-route-scheme="@provider.AuthenticationScheme"
                                       asp-route-returnUrl="@Model.ReturnUrl">
                                        @provider.DisplayName
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            </div>}

        @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
        {
            <div class="alert alert-warning">
                <strong>Invalid login request</strong>
                There are no login schemes configured for this request.
            </div>}
    </div>

</div>
<script src="~/lib/axios/axios.min.js"></script>
<script src="~/js/axiosTool.js"></script>
<script>
    new Vue({
        el: '#login-page',
        data() {
            return {
                passwordType: "password",
                form: {
                    Username: '',
                    Password: '',
                    RememberLogin: false,
                    ReturnUrl: getUrlParms('ReturnUrl')
                },
                beginClientX: 0,           /*距离屏幕左端距离*/
                mouseMoveStata: false,     /*触发拖动状态  判断*/
                maxwidth: '',               /*拖动最大宽度，依据滑块宽度算出来的*/
                confirmWords: '拖动滑块验证',   /*滑块文字*/
                confirmSuccess: false,          /*验证成功判断*/
                rules: {
                    Username: [
                        { required: true, message: '账号不能为空', trigger: 'blur' }
                    ],
                    Password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ]
                }
            }
        }, created() {
            this.form.ReturnUrl = getUrlParms('ReturnUrl');
        }, methods: {
            handleSubmit(name) {
                console.log(this.confirmSuccess)
                this.$refs[name].validate((valid) => {
                    if (!this.confirmSuccess) {
                        this.$Message.error('验证未通过!');
                    }
                    if (valid) {
                        this.$post('/api/account/login', this.form)
                            .then(res => {
                                if (res.success) {
                                    if (this.form.ReturnUrl != null) {
                                        location.href = this.form.ReturnUrl;
                                    } else { location.href = '/'; }
                                } else {
                                    for (err of res.errors) {
                                        this.$Message.error(err);
                                    }

                                    this.$nextTick(() => {
                                        this.$refs.Username.focus();
                                    });
                                }

                            }).catch(err => {
                                console.log(err)
                            })
                        //axios.get('/account/login', { params: this.form }).then(res => {
                        //    //resolve(res) // 返回请求成功的数据 data
                        //}).catch(err => {
                        //    reject(err)
                        //})
                    } 
                })
            },
            showPwd() {
                if (this.passwordType === "password") {
                    this.passwordType = "text";
                } else {
                    this.passwordType = "password";
                }
                this.$nextTick(() => {
                    this.$refs.Password.focus();
                });
            },
            mousedownFn: function (e) {
                if (!this.confirmSuccess) {
                    e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
                    this.mouseMoveStata = true;
                    this.beginClientX = e.clientX;
                }
            },        //mousedoen 事件
            successFunction() {
                this.confirmSuccess = true
                this.confirmWords = '验证通过';
                if (window.addEventListener) {
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn);
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn);
                } else {
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => { });
                }
                document.getElementsByClassName('drag_text')[0].style.color = '#fff'
                document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
                document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
            },                //验证成功函数
            mouseMoveFn(e) {
                if (this.mouseMoveStata) {
                    let width = e.clientX - this.beginClientX;
                    if (width > 0 && width <= this.maxwidth) {
                        document.getElementsByClassName('handler')[0].style.left = width + 'px';
                        document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
                    } else if (width > this.maxwidth) {
                        this.successFunction();
                    }
                }
            },                   //mousemove事件
            moseUpFn(e) {
                this.mouseMoveStata = false;
                var width = e.clientX - this.beginClientX;
                if (width < this.maxwidth) {
                    document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
                    document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
                }
            }  
        }, mounted() {
            this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
            document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn);
            document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
        }
    })
</script>